<template>
	<view class="tooltip" :style="{width:bgWidth+'rpx',height:bgHeight+'rpx'}" @click="sign">
		<image src="@/static/bg.png" :style="{width:bgWidth+'rpx',height:bgHeight+'rpx'}"></image>
		<view class="box" :style="{left:item.x+'rpx',top:item.y+'rpx'}" v-for="(item,index) in markers" :key="index">
			<zb-tooltip :placement="calculateLocation(item.x,item.y)" color="#fff" :visible="item.show">
				<view slot="content">
					<view class="model" :style="{width:modelWidth+'rpx',height:modelHeight+'rpx'}">
						<view>{{calculateLocation(item.x,item.y)}}</view>
					</view>
				</view>
				<view>
					<image src="@/static/she.png" class="img" @click="select(index)"></image>
				</view>
			</zb-tooltip>
			<!-- 使用案例 -->
			<!-- placement 可选范围： top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end -->
			<!-- <zb-tooltip placement="right" color="#333" :visible="visible">
				<view slot="content">
					<view class="model">
						<view>111</view>
					</view>
				</view>
				<view>
					<button @click="visible = !visible">111</button>
				</view>
			</zb-tooltip> -->
		</view>
	</view>
</template>

<script>
	import {
		mixin
	} from "./js/mixin.js"
	export default {
		mixins: [mixin],
		data() {
			return {
				// visible:false
			}
		},
		onLoad() {
			this.initImg()
		},
		methods: {
			sign(e) {
				// console.log("e--->", e);
			},
			select(index) {
				for (let i = 0; i < this.markers.length; i++) {
					if (index == i) {
						this.markers[i].show = !this.markers[i].show
					} else {
						this.markers[i].show = false
					}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.tooltip {
		position: relative;
		overflow: hidden;
	}

	.box {
		position: absolute;
	}

	.img {
		width: 60rpx;
		height: 60rpx;
	}

	.model {
		color: #333;
	}
</style>